<!-- 管理一 -->
<template>
  <div class="box">
    <div class="box-bbody">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        max-height="500"
      >
        <el-table-column fixed prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column width="120">
          <template slot="header" slot-scope="">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
            <!-- 编辑 -->
            <el-button type="text" size="small">编辑</el-button>
            <!-- @click="dialogTableVisible = true编辑" -->
            <!-- //添加 -->
            <el-button
              type="text"
              size="small"
              @click="dialogFormVisible = true"
              >添加</el-button
            >
            <!-- /// -->
            <el-dialog title="添加" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="名字" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                  <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="序号" :label-width="formLabelWidth">
                  <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="请选择国家">
                    <el-option label="中国" value="shanghai"></el-option>
                    <el-option label="可可西里" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 查看 -->
            <el-button
              @click="dialogTableVisible = true"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-dialog title="查看信息" :visible.sync="dialogTableVisible">
              <el-table :data="gridData">
                <el-table-column
                  property="date"
                  label="日期"
                  width="150"
                ></el-table-column>
                <el-table-column
                  property="name"
                  label="姓名"
                  width="200"
                ></el-table-column>
                <el-table-column
                  property="address"
                  label="地址"
                ></el-table-column>
              </el-table>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-footer">
      <div></div>
      <div></div>
      <div>
        <el-pagination background layout="prev, pager, next" :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //搜索
      search: "",
      //添加
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      //信息人物
      gridData: [
        {
          date: "2016-05-02",
          name: "垃圾",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "郝建",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "离开家",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //原信息
      tableData: [
        {
          date: "2016-05-03",
          name: "离开家",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "郝建",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "感受到",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "别的地",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "也让是",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "拿没拿",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "两个号",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
}
.box-bbody {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
}
.box-footer {
  width: 100%;
  height: 100px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  // align-items: center;
  padding: 0px 40px;
}
.box-footer {
  width: 100%;
  height: 100px;
  // background: red;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  padding: 0px 10px;
}
</style>